<script setup lang="ts">
import router from '@/router';
import { useRoute } from 'vue-router';
import { ordersDetail } from '../api/orders.js';
import {getAvailableRooms, changeRoomType } from '../api/rooms.js'; // 调换房型API
import { ElDialog, ElSelect, ElOption } from 'element-plus'; // 调换房型API
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import {useOrderStore} from '../stores/oderStoret'

import { createToken } from '../api/autoIdempotent.js'
import { saveFlow } from '../api/flow.js'
import dayjs from 'dayjs'
import { getRoomTypeRoomCount } from "../api/roominventory.js"
import { saveOrderExtension } from "../api/orderextension.js"

import axios from 'axios'


const route = useRoute();
const orderId = route.params.id;
//去支付时需要的，hotelId,roomTypeId,checkInDate,checkOutDate
const hotelId = ref()
const roomTypeId = ref()
const checkOutDate = ref()
const checkInDate = ref()
const userName = ref()
const userPhone = ref()
//延迟退房的剩余房间数
const delayAvailableCount = ref()
// 动态的延迟小时选项
const delayHourOptions = ref([])


const loading = ref(false)
//设置日期的渲染格式
const formatTime = (time: string | Date) => {
  if (!time) return '-'
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

//使用pinia
const orderStore = useOrderStore()

// 调换房型相关变量
const isChangeRoomDialog = ref(false); // 控制弹窗显示
const availableRooms = ref([]); // 可用房型列表
const selectedRoomType = ref(''); // 选中的房型ID


// 响应式订单详情对象
const orderDetailS = ref({});
const isDelayMode = ref(false); // 是否处于延迟退房模式
// 控制弹框显示
const showDelayDialog = ref(false)
// 延迟的小时数
const delayHours = ref(1)
// 延迟费用（可根据酒店规则动态计算）
const delayFee = ref(0)
// 每小时的延迟价格（这里写死，也可以从后端获取）
const feePerHour = ref()

onMounted(() => {
  getOrderDetail();
});

// 获取订单详情
async function getOrderDetail() {
  try {
    const id = orderId || 1;
    const response = await ordersDetail(id);

    console.log("--------订单详情-----------");
    console.log(response);
    feePerHour.value = (response.data.data.roomtypePrice * 0.15).toFixed(2)
    hotelId.value = response.data.data.hotelId
    roomTypeId.value = response.data.data.roomtypeId
    checkInDate.value = response.data.data.checkOut
    checkOutDate.value = response.data.data.checkOut
     userName.value = response.data.data.userName
     userPhone.value = response.data.data.userPhone
    orderDetailS.value = response.data.data || {};
    
    console.log("orderDetailS", orderDetailS.value);
    //为订单详情pinia赋值
    orderStore.setOrder(orderDetailS.value)
  } catch (error) {
    console.error("获取订单详情失败:", error);
  }
}

// 获取可用房型列表
async function fetchAvailableRooms() {
  try {
    // 调用后端接口获取当前酒店可调换的房型
    const response = await getAvailableRooms({
      hotelId: orderDetailS.value.hotelId,
      currentRoomTypeId: orderDetailS.value.roomtypeId,
      checkIn: orderDetailS.value.checkIn.split(' ')[0],
      checkOut: orderDetailS.value.checkOut.split(' ')[0]
    });
    console.log("调用参数：", {
  hotelId: orderDetailS.value.hotelId,
  currentRoomTypeId: orderDetailS.value.roomtypeId,
  checkIn: orderDetailS.value.checkIn,
  checkOut: orderDetailS.value.checkOut
});

     console.log("接口完整响应：", response); // 查看是否有 data 字段，以及 data 的结构
    
   // 1. 解析后端状态码（根据实际业务，200可能代表成功，其他代表失败）
    if (response.data.code === 200) { 
      // 后端成功返回时，data应为数组（假设此时格式正确）
      availableRooms.value = response.data.data || []; 
    } else {
      // 2. 后端返回错误（如code=201），提示错误信息
      ElMessage.error(`获取房型失败：${response.data.data || response.data.message}`);
      availableRooms.value = []; // 清空数据，避免渲染错误
    }
  } catch (error) {
    // 3. 网络错误（如跨域、404）
    console.error("请求异常：", error);
    ElMessage.error("网络错误，无法获取房型");
    availableRooms.value = [];
  }
}

// 新增：打开调换房型弹窗
function openChangeRoomDialog() {
  // 重置选中状态
  selectedRoomType.value = '';
  // 获取可用房型
  fetchAvailableRooms();
  // 显示弹窗
  isChangeRoomDialog.value = true;
}

// 新增：确认调换房型
// 确认调换房型（修正版：只保留一个，无参数，使用封装的 API）
async function confirmChangeRoom() {
  if (!selectedRoomType.value) {
    ElMessage.warning('请选择要调换的房型');
    return;
  }

  // 校验核心参数是否存在
  if (!orderDetailS.value?.orderId || !orderDetailS.value?.roomtypeId) {
    ElMessage.warning('订单信息或房间信息不完整，无法调换');
    return;
  }

  try {
    // 调用封装好的 API，传入后端需要的三个字段
    const response = await changeRoomType({
      orderId: orderDetailS.value.orderId,
      oldRoomTypeId: orderDetailS.value.roomtypeId, // 注意：后端需要 oldRoomTypeId
      newRoomTypeId: selectedRoomType.value
    });

    console.log("-----------------------------------------------");
    console.log(response);

    // 根据你的后端 Result 结构判断成功与否（假设 code === 200 表示成功）
    if (response.data.code === 200) {
       const msg = response.data.message;
         // 判断是否是“待支付”
  if (msg && msg.includes("待支付") && payData) {
        ElMessage.info("需要补差价，正在跳转支付宝支付...");

        // 构造 form 表单提交到 /order-transactions
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = 'http://localhost:8080/order-transactions'; // 你的支付接口地址
        form.target = '_blank'; // 在新窗口打开支付宝页面

        // 动态构建支付宝请求需要的字段
        const fields = {
          orderId: payData.orderId,
          orderNumber: payData.orderNumber,
          orderPrice: payData.orderPrice,
          hotelName: payData.hotelName
        };

     for (const key in payData) {
      if (payData[key] !== undefined && payData[key] !== null) {
        const input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = payData[key];
        form.appendChild(input);
      }
    } 

         document.body.appendChild(form);
    form.submit(); // 直接跳转到支付宝
    document.body.removeChild(form);

        // 不关闭弹窗，不刷新订单，等待支付回调后用户刷新
        return;
      }
      // 如果不是待支付，表示调换成功（无差价或退款）
      ElMessage.success('房型调换成功');
      isChangeRoomDialog.value = false;
      getOrderDetail(); // 重新刷新订单详情
    } else {
      ElMessage.error(response.data.message || '房型调换失败');
    }
  } catch (error) {
    console.error("调换房型失败:", error);
    ElMessage.error('操作失败，请稍后重试');
  }
}



// 点击去评价跳转到评价页面
function toComment() {
    console.log("准备跳转评论页：", orderDetailS.value);
  router.push({
    path: "/comment",
    query:  {
      hotelId: orderDetailS.value.hotelId,
      orderId: orderDetailS.value.orderId,
      hotelName: orderDetailS.value.hotelName,
      orderNumber: orderDetailS.value.orderNumber,
      roomtypeName: orderDetailS.value.roomtypeName,
      checkIn: orderDetailS.value.checkIn,
      checkOut: orderDetailS.value.checkOut,
      roomtypePrice: orderDetailS.value.roomtypePrice,
      orderStatus: orderDetailS.value.orderStatus
    }
  });
}
// 点击取消订单
function toCancelOrder() {
  // 跳转到提前取消页面，并传递订单ID
  router.push({
    path: '/cancelEarly',
    query: { orderId: orderDetailS.value.orderId }
  });
}

// 点击提前退房
function toCheckoutEarly(){
  console.log("准备跳转评论页：", orderDetailS.value);
  router.push({
    path: "/checkoutEarly",
    query:  {
      hotelId: orderDetailS.value.hotelId,
      orderId: orderDetailS.value.orderId,
      hotelName: orderDetailS.value.hotelName,
      hotelAddress:orderDetailS.value.hotelAddress,
      orderNumber: orderDetailS.value.orderNumber,
      checkIn: orderDetailS.value.checkIn,
      checkOut: orderDetailS.value.checkOut,
      roomtypeName: orderDetailS.value.roomtypeName,
      proPrice: orderDetailS.value.proPrice,
      roomQuantity: orderDetailS.value.roomQuantity,
      orderPrice: orderDetailS.value.orderPrice,
    }
  });
}

// 点击延迟退房
async function toDelayCheckout() {
  try {
    // 1️⃣ 查询剩余房间数
    const response = await getRoomTypeRoomCount(
      hotelId.value,
      roomTypeId.value,
      checkOutDate.value
    )

    delayAvailableCount.value = response?.data?.data ?? 0
    console.log("延迟退房剩余库存：", delayAvailableCount.value)

    // 2️⃣ 根据剩余数量确定可延迟小时
    if (delayAvailableCount.value > 1) {
      delayHourOptions.value = [1, 2, 3, 4, 5] // 最多 5 小时
    } else {
      delayHourOptions.value = [1, 2] // 最多 2 小时
    }

    // 3️⃣ 打开弹窗，初始化默认值
    showDelayDialog.value = true
    delayHours.value = 1
    delayFee.value = parseFloat(feePerHour.value)
  } catch (err) {
    console.error("查询延迟退房可用房间失败:", err)
    ElMessage.error("查询房型库存失败，请稍后重试")
  }
}
// 监听小时数变化，动态计算费用
function updateDelayFee() {
  delayFee.value = (delayHours.value * parseFloat(feePerHour.value)).toFixed(2)
}
// 延迟退房确认支付（最终版）
async function confirmDelayPayment() {
  try {
    showDelayDialog.value = false
    loading.value = true

    // ✅ 第 1 步：调用接口保存延迟退房记录
    const orderExtension = {
      orderId: orderDetailS.value.orderId,
      extensionFee: delayFee.value,
      extensionTimes: delayHours.value,
    }

    const saveRes = await saveOrderExtension(orderExtension)
    const tradeNo = saveRes.data.data
    if (saveRes.data.code !== 200) {
      ElMessage.error("延迟退房记录保存失败！")
      return
    }

    // ✅ 第 2 步：生成幂等 token
    const tokenRes = await createToken()
    const formToken = tokenRes?.data?.data
    if (!formToken) throw new Error("生成支付 token 失败")

    // ✅ 第 3 步：调用支付宝支付接口（复用 saveFlow）
    const myorder = {
      orderId: orderDetailS.value.orderId,
      orderNumber: tradeNo,
      hotelId: orderDetailS.value.hotelId,
      hotelName: orderDetailS.value.hotelName,
      orderPrice: delayFee.value, // ⚠️ 注意，这里是延迟退房的费用
      userId: Number(localStorage.getItem("userId")),
      //bizType: "EXTENSION", // 建议给后端区分支付类型（普通订单 / 延迟退房）
    }

    const payRes = await saveFlow(myorder, formToken)
    const html = payRes?.data
    if (!html || typeof html !== "string") {
      throw new Error("支付接口返回异常")
    }

    // ✅ 第 4 步：自动提交表单到支付宝
    const div = document.createElement("div")
    div.innerHTML = html
    document.body.appendChild(div)
    const form = div.querySelector("form")
    if (form) {
      form.submit()
    } else {
      throw new Error("支付表单不存在")
    }

    ElMessage.success(`延迟退房申请成功，正在跳转支付宝支付`)

  } catch (err) {
    console.error("延迟退房支付失败：", err)
    ElMessage.error(err.message || "延迟退房支付失败，请稍后重试")
  } finally {
    loading.value = false
  }
}


//日期格式转化
function formatDate(date) {
  if (!date) return '';
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 点击支付跳转到支付页面
function toPay() {
  // 这里可以先提交修改后的延迟退房信息到后端再跳转
  // await updateOrder(orderDetailS.value)
  // router.push(`/toPay`);
  const formattedCheckIn = formatDate(checkInDate.value);
  const formattedCheckOut = formatDate(checkOutDate.value);
   router.push({path:'/toPay',
   query:{hotelId:hotelId.value,roomTypeId:roomTypeId.value,
          checkInDate:formattedCheckIn,checkOutDate:formattedCheckOut,
        userName:userName.value,userPhone:userPhone.value}})
}
//待支付状态下的去支付
// ✅ 新增：直接对已有订单发起支付（不再重新下单）
async function payExistingOrder() {
  if (loading.value) return

  if (!orderDetailS.value?.orderId || !orderDetailS.value?.orderNumber) {
    ElMessage.error('订单信息不完整，无法发起支付')
    return
  }

  try {
    loading.value = true

    // 1. 获取幂等 token
    const tokenRes = await createToken()
    const formToken = tokenRes?.data?.data
    if (!formToken) throw new Error('生成支付 token 失败')

    // 2. 构造支付请求对象（沿用 toPay 页结构）
    const myorder = {
      orderId: orderDetailS.value.orderId,
      orderNumber: orderDetailS.value.orderNumber,
      hotelId: orderDetailS.value.hotelId,
      hotelName: orderDetailS.value.hotelName,
      orderPrice: orderDetailS.value.orderPrice ?? orderDetailS.value.proPrice ?? 0,
      userId:  Number(localStorage.getItem('userId'))
    }

    // 3. 请求支付接口
    const payRes = await saveFlow(myorder, formToken)
    const html = payRes?.data
    if (!html || typeof html !== 'string') throw new Error('支付接口返回异常')

    // 4. 注入 HTML 表单并提交
    const div = document.createElement('div')
    div.innerHTML = html
    document.body.appendChild(div)
    const form = div.querySelector('form')
    if (form) {
      form.submit()
    } else {
      throw new Error('支付表单不存在')
    }
  } catch (err) {
    console.error('发起支付失败', err)
    ElMessage.error(err.message || '发起支付失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
const statusClass = (status: string) => {
  switch (status) {
    case '已通过':
      return 'approved'
    case '已完成':
      return 'paid'
    default:
      return ''
  }
}

</script>

<template>
  <div class="order-detail" v-if="orderDetailS && Object.keys(orderDetailS).length">
    <!-- 订单信息 -->
    <div class="card">
      <h3>订单信息</h3>
      <div class="grid-2">
        <p>
          <strong>订单状态：</strong>
          <span :class="orderDetailS.orderStatus">{{ orderDetailS.orderStatus }}</span>
        </p>
        <p><strong>订单号：</strong>{{ orderDetailS.orderNumber }}</p>
        <p><strong>商品价格：</strong><span class="price">{{ orderDetailS.proPrice }} 元</span></p>
        <p><strong>订单价格：</strong><span class="price">{{ orderDetailS.orderPrice }} 元</span></p>
      </div>
    </div>

    <!-- 酒店信息 -->
    <div class="card hotel">
      <h3>酒店信息</h3>
      <div class="flex-box">
        <img :src="orderDetailS.hotelImage" alt="hotel" class="hotel-img" />
        <div class="info">
          <p><strong>{{ orderDetailS.hotelName }}</strong></p>
          <p>📍 {{ orderDetailS.hotelAddress }}</p>
          <p>☎ {{ orderDetailS.hotelPhone }}</p>
        </div>
      </div>
    </div>

    <!-- 入住信息 -->
    <div class="card">
      <h3>入住信息</h3>

      <!-- 正常显示模式 -->
      <div v-if="!isDelayMode" class="grid-2">
        <p>入住时间：{{ orderDetailS.checkIn }}</p>
        <p>离店时间：{{ orderDetailS.checkOut }}</p>
        <p>住客姓名：{{ orderDetailS.userName }}</p>
        <p>联系方式：{{ orderDetailS.userPhone }}</p>
      </div>

      <!-- 延迟退房编辑模式 -->
      <div v-else class="grid-2">
        <div>
          <label>入住时间：</label>
          <el-input v-model="orderDetailS.checkIn" disabled></el-input>
        </div>
        <div>
          <label>离店时间：</label>
          <el-date-picker
            v-model="checkOutDate"
            type="datetime"
            placeholder="选择新的离店时间"
            style="width: 100%;"
          />
        </div>
        <div>
          <label>住客姓名：</label>
          <el-input v-model="orderDetailS.userName"></el-input>
        </div>
        <div>
          <label>联系方式：</label>
          <el-input v-model="orderDetailS.userPhone"></el-input>
        </div>
      </div>
    </div>
        <!-- 延迟退房信息 -->
    <div v-if="orderDetailS.extension" class="card">
      <h3>延迟退房信息</h3>
      <div class="grid-2">
        <p><strong>延迟时间：</strong>{{ orderDetailS.extension.extensionTimes }} 小时</p>
        <p>
          <strong>延迟费用：</strong>
          <span class="price">{{ orderDetailS.extension.extensionFee }} 元</span>
        </p>
        <p><strong>申请时间：</strong>{{ formatTime(orderDetailS.extension.applyTime) }}</p>
        <p>
          <strong>状态：</strong>
          <span :class="statusClass(orderDetailS.extension.extensionStatus)">
            {{ orderDetailS.extension.extensionStatus }}
          </span>
        </p>
      </div>
    </div>

    <!-- 房间信息 -->
    <div class="card">
      <h3>房间信息</h3>
      <div class="flex-box">
        <img :src="orderDetailS.roomImage" alt="room" class="room-img" />
        <div class="info">
          <p>{{ orderDetailS.roomtypeName }}</p>
          <p>{{ orderDetailS.roomtypeDes }}</p>
          <p>面积：{{ orderDetailS.roomArea }}</p>
          <p class="price">￥{{ orderDetailS.roomtypePrice }}/晚</p>
        </div>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div class="action-box">
      <!-- 延迟退房模式下 -->
      <button
        v-if="isDelayMode"
        class="btn orange"
        @click="toPay()"
      >
        去支付
      </button>

      <!-- 已完成且未评价 -->
      <button
        v-else-if="orderDetailS.orderStatus === '已完成' && orderDetailS.isComment === 0"
        class="btn blue"
        @click="toComment()"
      >
        去评价
      </button>

      <!-- 待支付 -->

      <button
        v-else-if="orderDetailS.orderStatus === '待支付'"
        class="btn orange"
        :disabled="loading"
        @click="payExistingOrder()"
      >
        去支付
      </button>


      <!-- 待入住 -->

      <div v-else-if="orderDetailS.orderStatus === '待支付'" class="btn-group center">
        <button class="btn orange" @click="toPay()">去支付</button>
        <button class="btn gray">取消订单</button>
      </div>

      <!-- 未出行 -->


      <!-- <div v-else-if="orderDetailS.orderStatus === '待出行' "> -->

      <div v-if="orderDetailS.orderStatus === '待入住' ">
        <!-- <button class="btn green" @click="toCancelOrder()">取消订单</button> -->

        <button class="btn green" @click="toCancelOrder()">提前取消</button>
      </div>
      <!-- </div> -->

      <!-- 已入住 -->
      <div v-else-if="orderDetailS.orderStatus === '已入住'">
        <button class="btn green" @click="toCheckoutEarly">提前退房</button>

          <!-- 仅当没有延迟退房记录时才显示 -->
          <button
            v-if="!orderDetailS.extension"
            class="btn green"
            @click="toDelayCheckout"
          >
            延迟退房
          </button>
        <button class="btn green" @click="openChangeRoomDialog">调换房型</button>

      </div>
    </div>
  </div>

  <!-- 数据加载中 -->
  <div v-else class="loading">正在加载订单详情...</div>

<!-- 延迟退房弹窗（增强版） -->
<el-dialog
  v-model="showDelayDialog"
  title="🕒 延迟退房申请"
  width="600px"
  align-center
>
  <div style="font-size: 17px; line-height: 1.8;">

    <!-- 延迟退房规则 -->
    <div
      style="
        background: #f8f9fb;
        border-left: 4px solid #409eff;
        padding: 14px 18px;
        margin-bottom: 22px;
        border-radius: 8px;
        font-size: 18px;
        color: #333;
      "
    >
      <strong style="color: #409eff;">延迟退房规则：</strong>
      每延迟 <strong>1 小时</strong>，按房间原价的
      <strong style="color: #ff6600;">15%</strong> 收取费用。
    </div>

    <!-- 库存提示 -->
    <div style="margin-bottom: 18px; color: #444; font-size: 18px;">
      <template v-if="delayAvailableCount > 1">
        当前房型库存充足，可延迟 <strong>最多 5 小时</strong>。
      </template>
      <template v-else>
        当前房型库存紧张，仅可延迟 <strong>最多 2 小时</strong>。
      </template>
    </div>

    <!-- 选择延迟时间 -->
    <div style="margin-bottom: 24px;">
      <p style="margin-bottom: 10px; font-size: 18px; font-weight: 500;">请选择延迟时间：</p>
      <el-select
        v-model="delayHours"
        placeholder="请选择延迟小时"
        @change="updateDelayFee"
        style="
          width: 100%;
          font-size: 18px;
          height: 46px;
        "
      >
        <el-option
          v-for="hour in delayHourOptions"
          :key="hour"
          :label="hour + ' 小时'"
          :value="hour"
          style="font-size: 17px;"
        />
      </el-select>
    </div>

    <!-- 延迟费用显示 -->
    <div
      style="
        background: #fff5eb;
        padding: 14px 18px;
        border-radius: 10px;
        margin: 18px 0;
        font-size: 19px;
      "
    >
      <strong>延迟费用：</strong>
      <span style="color: #ff6600; font-size: 24px; font-weight: bold;">￥{{ delayFee }}</span>
    </div>
  </div>

  <!-- 底部按钮 -->
  <template #footer>
    <span class="dialog-footer">
      <el-button size="large" @click="showDelayDialog = false">取 消</el-button>
      <el-button size="large" type="primary" @click="confirmDelayPayment">去支付</el-button>
    </span>
  </template>
</el-dialog>





  <el-dialog
    title="调换房型"
    v-model="isChangeRoomDialog"
    width="500px"
  >
    <div class="dialog-content">
      <p>当前房型：{{ orderDetailS.roomtypeName }}</p>
      <div class="form-item">
        <label>选择新房型：</label>
        <el-select
          v-model="selectedRoomType"
          placeholder="请选择房型"
          style="width: 100%;"
        >
          <el-option
            v-for="room in availableRooms"
            :key="room.roomtypeId"
            :label="`${room.roomtypeName}`"
            :value="room.roomtypeId"
          ></el-option>
        </el-select>
      </div>
    </div>
    <template #footer>
      <button class="btn gray" @click="isChangeRoomDialog = false">取消</button>
      <button class="btn green" @click="confirmChangeRoom">确认调换</button>
    </template>
  </el-dialog>


</template>

<style scoped>
.order-detail {
  max-width: 1000px;
  margin: 20px auto;
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
}

.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

h3 {
  margin-bottom: 12px;
  font-size: 18px;
  border-left: 4px solid #409eff;
  padding-left: 8px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.flex-box {
  display: flex;
  gap: 20px;
}

.hotel-img,
.room-img {
  width: 180px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}

.info p {
  margin: 4px 0;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #ff6600;
  margin-top: 6px;
}

/* 状态颜色 */
.已完成 {
  color: #4caf50;
  font-weight: bold;
}
.待支付 {
  color: #e6a23c;
  font-weight: bold;
}
.待入住 {
  color: #409eff;
  font-weight: bold;
}
.已入住 {
  color: #0400ff;
  font-weight: bold;
}
.已取消 {
  color: #f56c6c;
  font-weight: bold;
}

.action-box {
  text-align: center;
  margin-top: 20px;
}

.btn {
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
  margin: 0 6px;
}
.btn.blue {
  background: #409eff;
}
.btn.blue:hover {
  background: #66b1ff;
}
.btn.orange {
  background: #e6a23c;
}
.btn.orange:hover {
  background: #f3c96a;
}
.btn.green {
  background: #67c23a;
}
.btn.green:hover {
  background: #85ce61;
}
.btn.gray {
  background: #aaa;
  cursor: not-allowed;
}

.loading {
  text-align: center;
  margin-top: 100px;
  color: #888;
  font-size: 16px;
}

/* 表单样式 */
label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: #555;
}

/* 延迟退房状态颜色 */
.approved {
  color: #67c23a; /* 绿色：已通过 */
  font-weight: bold;
}
.paid {
  color: #409eff; /* 蓝色：已完成 */
  font-weight: bold;
}



.btn-group {
  display: flex;
  gap: 10px;
}

.btn.orange {
  background-color: #ff9900;
  color: white;
}

.btn.gray {
  background-color: #ccc;
  color: #333;
}
.btn-group.center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  gap: 16px; /* 按钮之间的间距 */
  margin-top: 20px;
}

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.btn.orange {
  background-color: #ff9900;
  color: white;
}

.btn.gray {
  background-color: #ccc;
  color: #333;
}

/* 调换房型弹窗 */
.dialog-content {
  padding: 10px 0;
}

.form-item {
  margin-top: 15px;
}

</style>
